<!--
 * @Author: your name
 * @Date: 2021-09-05 23:52:11
 * @LastEditTime: 2021-12-14 00:41:55
 * @LastEditors: Please set LastEditors
 * @Description:  领取专享优惠券
 * @FilePath: \leYi\components\Goods\seleShop.vue
-->
<template>
  <view class="seleBox">
    <u-cell-group v-if="!isActive">
      <u-cell-item @click="handleToApplet">
        <u-icon slot="icon" size="44" name="search"></u-icon>
        <text slot="title" class="getCoucon">领取专享优惠券</text>
      </u-cell-item>
      <u-cell-item @click="handleToApplet">
        <text slot="icon" class="icon">选择</text>
        <text slot="title" class="title" v-if="typeData.suk"
          >已选 {{ typeData.suk }}</text
        >
        <text slot="title" class="title" v-else>已选:</text>
      </u-cell-item>
      <u-cell-item :arrow="false" @click="handleToApplet">
        <text slot="icon" class="icon">邮费</text>
        <text slot="title" class="title">免运费(请以提交订单时为准)</text>
      </u-cell-item>
    </u-cell-group>

    <u-cell-group v-if="isActive">
      <u-cell-item
        :arrow="true"
        @click="handleToApplet"
        v-if="isVipCard !== 'isVipCard'"
      >
        <text slot="icon" class="iconSingle">领卷</text>
        <text slot="title" class="titleSingle">领取专享优惠券</text>
      </u-cell-item>

      <u-cell-item :arrow="false" use-label-slot>
        <text slot="icon" class="iconSingle">邮费</text>
        <text slot="title" class="titleSingle">免运费(请以提交订单时为准)</text>
        <text slot="label" class="titleTip">温馨提示，活动商品不支持退货</text>
      </u-cell-item>
    </u-cell-group>
  </view>
</template>
<script>
import { mapState } from "vuex";

export default {
  props: {
    typeData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      isActive: state => state.isActive // 是否为单品标识
    })
  },
  methods: {
    handleToApplet() {
      this.$emit("handleJump");
    }
  }
};
</script>
<style lang="scss" scoped>
.iconSingle {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;

  color: #000000;
  opacity: 1;
}
.titleSingle {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  margin-left: 62rpx;
  color: #d83643;
  opacity: 1;
}
.titleTip {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  margin-left: 70rpx;
  color: #b4b4b4;
  opacity: 1;
}
.getCoucon {
  margin-left: 20rpx;
  width: 224rpx;
  height: 32rpx;
  opacity: 0.8;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #000000;
  line-height: 33rpx;
}
.icon {
  // width: 66rpx;
  height: 32rpx;
  opacity: 1;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #707070;
  line-height: 35rpx;
  letter-spacing: 2rpx;
}
.title {
  width: 221rpx;
  height: 32rpx;
  opacity: 1;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #000000;
  margin-left: 25rpx;
  line-height: 35rpx;
  letter-spacing: 2rpx;
}
</style>